<template>

    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input v-model="query.title" placeholder="DNF自营辟邪玉管理"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click.native="handleForm(null, null)">新增</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" style="width: 100%;">
            <el-table-column label="ID" prop="id" fixed>
            </el-table-column>
            <el-table-column label="等级" prop="level" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="游戏区服" prop="gameServer" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="销售价" prop="price" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="手续费" prop="charge" with="300" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="数量" prop="amount" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="平台" prop="platform" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="发布时间" prop="createTime" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="商家" prop="createBy" :show-overflow-tooltip="true" fixed>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                        @click.native="handleForm(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" size="small"
                        @click.native="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination :page-size="query.limit" @current-change="handleCurrentChange" layout="prev, pager, next"
            :total="total">
        </el-pagination>

        <!--表单-->
        <el-dialog :title="formMap[formName]" :visible.sync="formVisible" :before-close="hideForm" width="650px"
            top="5vh">
            <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="dataForm">

                <el-form-item label="游戏区服" prop="gameServer">
                    <!--                    <el-input v-model="formData.gameServer" auto-complete="off"></el-input>-->
                    <el-select v-model="formData.gameServer" placeholder="请选择游戏区服">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="等级" prop="level">
                    <el-select v-model="formData.level" placeholder="请选择等级">
                        <el-option v-for="item in levelOptions" :key="item.value" :label="item.text"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="amount">
                    <el-input v-model="formData.amount" auto-complete="off">
                        <template slot="append">个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="销售价" prop="price">
                    <el-input v-model="formData.price" auto-complete="off">
                        <template slot="append">元/个</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="手续费" prop="charge">
                    <el-input v-model="formData.charge" auto-complete="off">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="对接平台" prop="platform">
                    <el-input v-model="formData.platform" auto-complete="off" disabled></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="词条1" prop="attrs">
                            <el-cascader  
                            :props="{emitPath: false}"
                            clearable v-model="attrs.attr1" :options="attrOptions"
                                placeholder="请选择词条1" style="width: 100%">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="attrs">
                            <el-input v-model="attrs.attr1Val" placeholder="请输入属性" style="width: 100%">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="词条2" prop="attrs">
                            <el-cascader 
                            :props="{emitPath: false}" clearable v-model="attrs.attr2" :options="attrOptions"
                                placeholder="请选择词条2" style="width: 100%">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="attrs">
                            <el-input v-model="attrs.attr2Val" placeholder="请输入属性" style="width: 100%">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="词条3" prop="attrs">
                            <el-cascader 
                            :props="{emitPath: false}" label="text" value="id" clearable v-model="attrs.attr3"
                             :options="attrOptions"
                                placeholder="请选择词条3" style="width: 100%">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item  prop="attrs">
                            <el-input v-model="attrs.attr3Val" placeholder="请输入属性" style="width: 100%">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="词条4" prop="attr4">
                            <el-cascader 
                            :props="{emitPath: false}" :label="'text'" :value="'id'" clearable
                             v-model="attrs.attr4" :options="attrOptions"
                                placeholder="请选择词条4" style="width: 100%">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item  prop="attrs">
                            <el-input v-model="attrs.attr4Val" placeholder="请输入属性" style="width: 100%">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="封面图片" prop="pic">
                    <el-card style="width: 100px" class="box-card w100" v-if="formData.img">
                        <img :src="formData.img" style="width: 100%;" alt="">
                    </el-card>
                    <upload ext="jpg,png" @on-select="onSelect"></upload>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="formData.remark" type="textarea" show-word-limit maxlength="200"
                        auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideForm">取消</el-button>
                <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">提交</el-button>
            </div>
        </el-dialog>

    </div>

</template>

<script>
import { jadeSave, jadeList, jadeDelete, gameServers } from "../../api/dnf/jade";
import Upload from "../../components/File/Upload.vue";
const formJson = {
    id: "",
    auction: "",
    gameServer: "",
    price: "",
    charge: "",
    amount: "",
    type: "1",
    remark: "",
    platform: "自营"
};
export default {
    data() {
        return {
            attrs: {
                attr1: '',
                attr1Val: '',
                attr2: '',
                attr2Val: '',
                attr3: '',
                attr3Val: '',
                attr4: '',
                attr4Val: ''
            },
            options: [
            ],
            query: {
                title: "",
                type: 1,
                page: 1,
                limit: 20
            },
            channelListInput: "",
            androidVersionListInput: "",
            iosVersionListInput: "",
            list: [],
            total: 0,
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                edit: "编辑"
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                level: [
                    {
                        required: true,
                        message: "请输入等级",
                        trigger: "blur"
                    }
                ],
                gameServer: [
                    {
                        required: true,
                        message: "请输入游戏区服",
                        trigger: "blur"
                    }
                ],
                price: [
                    {
                        required: true,
                        message: "请输入销售价",
                        trigger: "blur"
                    }
                ],
                charge: [
                    {
                        required: true,
                        message: "请输入手续费",
                        trigger: "blur"
                    }
                ],
                amount: [
                    {
                        required: true,
                        message: "请输入数量",
                        trigger: "blur"
                    }
                ],
                platform: [
                    {
                        required: true,
                        message: "请输入平台",
                        trigger: "blur"
                    }
                ],
            },
            levelOptions: [
                { text: '稀有', value: '【稀有】' },
                { text: '神器', value: '【神器】' },
                { text: '传说', value: '【传说】' },
                { text: '史诗', value: '【史诗】' }
            ],
            attrOptions: [
                {
                    "label": "伤害增加",
                    "value": "伤害增加",
                    "children": [
                        {
                            "label": "[附加伤害增加]增幅",
                            "value": "[附加伤害增加]增幅"
                        },
                        {
                            "label": "技能攻击力增加",
                            "value": "技能攻击力增加"
                        },
                        {
                            "label": "[暴击伤害增加]增幅",
                            "value": "[暴击伤害增加]增幅"
                        },
                        {
                            "label": "[伤害增加]增幅",
                            "value": "[伤害增加]增幅"
                        },
                        {
                            "label": "[最终伤害增加]增幅",
                            "value": "[最终伤害增加]增幅"
                        },
                        {
                            "label": "[物理/魔法/独立攻击力增加]增幅",
                            "value": "[物理/魔法/独立攻击力增加]增幅"
                        }
                    ]
                },
                {
                    "label": "能力值增加",
                    "value": "能力值增加",
                    "children": [
                        {
                            "label": "[力量智力增加]增幅",
                            "value": "[力量智力增加]增幅"
                        },
                        {
                            "label": "生命最大值增加",
                            "value": "生命最大值增加"
                        },
                        {
                            "label": "魔法值最大值增加",
                            "value": "魔法值最大值增加"
                        },
                        {
                            "label": "物理防御力增加",
                            "value": "物理防御力增加"
                        },
                        {
                            "label": "魔法防御力增加",
                            "value": "魔法防御力增加"
                        },
                        {
                            "label": "物理暴击率增加",
                            "value": "物理暴击率增加"
                        },
                        {
                            "label": "魔法暴击率增加",
                            "value": "魔法暴击率增加"
                        },
                        {
                            "label": "攻击、移动、施法速度",
                            "value": "攻击、移动、施法速度"
                        },
                        {
                            "label": "回避率增加",
                            "value": "回避率增加"
                        },
                        {
                            "label": "命中率增加",
                            "value": "命中率增加"
                        },
                        {
                            "label": "物品栏负重增加",
                            "value": "物品栏负重增加"
                        },
                        {
                            "label": "跳跃力增加",
                            "value": "跳跃力增加"
                        },
                        {
                            "label": "生命值每秒回复量增加",
                            "value": "生命值每秒回复量增加"
                        },
                        {
                            "label": "魔法值每秒回复量增加",
                            "value": "魔法值每秒回复量增加"
                        }
                    ]
                },
                {
                    "label": "辅助属性",
                    "value": "辅助属性",
                    "children": [
                        {
                            "label": "[荣誉/勇气/禁术/节拍]力智",
                            "value": "[荣誉/勇气/禁术/节拍]力智"
                        },
                        {
                            "label": "[荣誉/勇气/禁术/节拍]力智%",
                            "value": "[荣誉/勇气/禁术/节拍]力智%"
                        },
                        {
                            "label": "[荣誉/勇气/禁术/节拍]三攻",
                            "value": "[荣誉/勇气/禁术/节拍]三攻"
                        },
                        {
                            "label": "[荣誉/勇气/禁术/节拍]三攻%",
                            "value": "[荣誉/勇气/禁术/节拍]三攻%"
                        },
                        {
                            "label": "[天启/圣光/开幕/梦想]力智",
                            "value": "[天启/圣光/开幕/梦想]力智"
                        },
                        {
                            "label": "[天启/圣光/开幕/梦想]力智%",
                            "value": "[天启/圣光/开幕/梦想]力智%"
                        }
                    ]
                },
                {
                    "label": "技能等级",
                    "value": "技能等级",
                    "children": [
                        {
                            "label": "10~15级技能等级增加",
                            "value": "10~15级技能等级增加"
                        },
                        {
                            "label": "20~25级技能等级增加",
                            "value": "20~25级技能等级增加"
                        },
                        {
                            "label": "30~35级技能等级增加",
                            "value": "30~35级技能等级增加"
                        },
                        {
                            "label": "40~45级技能等级增加",
                            "value": "40~45级技能等级增加"
                        },
                        {
                            "label": "55~60级技能等级增加",
                            "value": "55~60级技能等级增加"
                        },
                        {
                            "label": "65~70级技能等级增加",
                            "value": "65~70级技能等级增加"
                        },

                        {
                            "label": "75~80级技能等级增加",
                            "value": "75~80级技能等级增加"
                        },
                        {
                            "label": "1次觉醒技能等级增加",
                            "value": "1次觉醒技能等级增加"
                        },
                        {
                            "label": "2次觉醒技能等级增加",
                            "value": "2次觉醒技能等级增加"
                        }
                    ]
                },
                {
                    "label": "属性效果",
                    "value": "属性效果",
                    "children": [
                        {
                            "label": "[装备属性强化增加]增幅",
                            "value": "[装备属性强化增加]增幅"
                        },
                        {
                            "label": "[暗属性附加伤害增加]增幅",
                            "value": "[暗属性附加伤害增加]增幅"
                        },
                        {
                            "label": "[光属性附加伤害增加]增幅",
                            "value": "[光属性附加伤害增加]增幅"
                        },
                        {
                            "label": "[火属性附加伤害增加]增幅",
                            "value": "[火属性附加伤害增加]增幅"
                        },
                        {
                            "label": "[冰属性附加伤害增加]增幅",
                            "value": "[冰属性附加伤害增加]增幅"
                        },
                        {
                            "label": "暗属性抗性增加",
                            "value": "暗属性抗性增加"
                        },
                        {
                            "label": "光属性抗性增加",
                            "value": "光属性抗性增加"
                        },
                        {
                            "label": "火属性抗性增加",
                            "value": "火属性抗性增加"
                        },
                        {
                            "label": "冰属性抗性增加",
                            "value": "冰属性抗性增加"
                        },
                        {
                            "label": "暗属性赋予",
                            "value": "暗属性赋予"
                        },
                        {
                            "label": "光属性赋予",
                            "value": "光属性赋予"
                        },
                        {
                            "label": "火属性赋予",
                            "value": "火属性赋予"
                        },
                        {
                            "label": "冰属性赋予",
                            "value": "冰属性赋予"
                        }
                    ]
                }
            ],
            deleteLoading: false
        };
    },
    components: {
        Upload
    },
    methods: {
        onSelect(filePath, filePathUrl) {
            // this.filePath1 = filePath;
            // this.filePathUrl1 = IMG_BASE_URL + filePath;
            this.formData.pic = filePath
            this.formData.img = filePath;
        },
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                title: "",
                page: 1,
                limit: 20
            };
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            jadeList(this.query)
                .then(response => {
                    this.loading = false;
                    this.list = response.data.records || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        // 删除渠道
        handleChannelListClose(index) {
            console.log(index);
            // 更改值
            this.formData.channelList.splice(index, 1);
        },
        // 添加渠道白名单
        handleChannelListSubmit() {
            // 更改值
            if (
                this.channelListInput &&
                this.formData.channelList.length < 15
            ) {
                let arr = this.channelListInput.split(",");
                for (let i in arr) {
                    if (
                        arr[i] !== "" &&
                        (this.formData.channelList.length === 0 ||
                            this.formData.channelList.indexOf(arr[i]) < 0)
                    ) {
                        this.formData.channelList.push(arr[i]);
                    }
                }
                this.channelListInput = "";
                this.$refs.channelListRef.focus();
            }
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空字段
                this.$refs["dataForm"].resetFields();
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
            }
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        // 显示表单
        handleForm(index, row) {
            this.formVisible = true;
            // 刷新表单
            this.resetForm();
            this.formData = JSON.parse(JSON.stringify(formJson));
            if (row !== null) {
                this.formData = Object.assign({}, row);
                this.formData.attrs = JSON.parse(row.attrs)
                this.attrs = this.formData.attrs
            }
            this.formName = "add";
            if (index !== null) {
                this.index = index;
                this.formName = "edit";
            }
        },
        formSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    let data = Object.assign({}, this.formData);
                    data.attrs = JSON.stringify(this.attrs)
                    jadeSave(data, this.formName)
                        .then(response => {
                            this.formLoading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            this.attrs = {}
                            this.formVisible = false;
                            this.getList();
                            // if (this.formName === "add") {
                            //     // 向头部添加数据
                            //     data.adId = response.data.adId;
                            //     this.list.unshift(data);
                            // } else {
                            //     this.list.splice(this.index, 1, data);
                            // }
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
        // 删除
        handleDel(index, row) {
            if (row.id) {
                this.$confirm("确认删除该记录吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        let para = { id: row.id };
                        this.deleteLoading = true;
                        jadeDelete(para)
                            .then(response => {
                                this.deleteLoading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message("删除成功");
                                // 刷新数据
                                this.list.splice(index, 1);
                            })
                            .catch(() => {
                                this.deleteLoading = false;
                            });
                    })
                    .catch(() => {
                        this.$message.info("取消删除");
                    });
            }
        },
        onSelectPic(filePath, filePathUrl) {
            this.formData.pic = filePath;
            this.formData.picUrl = filePathUrl;
        }
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success"
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常"
            };
            return statusMap[status];
        }
    },
    mounted() { },
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        this.query = Object.assign(this.query, query);
        this.query.limit = parseInt(this.query.limit);
        // 加载表格数据
        this.getList();
        gameServers()
            .then(response => {
                this.options = response.data || [];
            })
            .catch(() => {
                this.options = [];
            });
    }
};
</script>

<style type="text/scss" lang="scss"></style>
